<template>
  <div class="nav">
    <div class="header">
      <div class="logos">
        <img
          :src="rosatom_logo"
          alt=""
        >
      </div>
      <RouterLink to="/planning">
        {{ t('routes.planning') }}
      </RouterLink>
      <RouterLink to="/data">
        {{ t('routes.data') }}
      </RouterLink>
      <RouterLink to="/routes">
        {{ t('routes.plans') }}
      </RouterLink>
    </div>
    <div class="content">
      <RouterView
        @showPoints="showPoints"
        @clearPoints="clearPoints"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import rosatom_logo from '@/assets/logo.png';

import { useI18n } from 'vue-i18n';

const emits = defineEmits<{
	clearPoints: [],
	showPoints: [start: number[], end: number[]]
}>();


function showPoints(start: number[], end: number[]) {
	emits('showPoints', start, end);
}


function clearPoints() {
	emits('clearPoints');
}


const { t } = useI18n();
</script>

<style lang="scss" scoped>
.nav {
	width: 100%;
	height: 100%;
	max-height: 100%;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;

	&>.header {
		display: flex;
		flex-direction: row;
		justify-content: end;
		gap: 16px;

		&>.logos {
			display: flex;
			flex-direction: row;
			margin-right: auto;

			&>img {
				width: 32px;
				height: 32px;
			}
		}

		&::v-deep(>*) {
			font-size: 20px;
			color: black;
			text-decoration: none;

			&.router-link-active {
				font-weight: bold;
			}
		}
	}

	&>.content {
		max-height: calc(100% - 48px);
		display: flex;
		flex-direction: column;
	}
}
</style>